import { Button, Card, Input, Table, Modal,Form,InputNumber,Pagination  } from 'antd'
import React, { useEffect, useState } from 'react'
import server from '../../http/request';
import { ExclamationCircleOutlined } from '@ant-design/icons';
const { Search } = Input;
const { confirm } = Modal;
function showConfirm(id) {
  confirm({
    title: '你确定要删除吗?',
    icon: <ExclamationCircleOutlined />,
    content: 'Some descriptions',
    onOk() {
      console.log('OK',id);
      server.delete(`/goods/${id}`).then(res=>{
          console.log('删除成功');
      })
    },
    onCancel() {
      console.log('Cancel');
    },
  });
}
function Goods() {
    const [updateform] = Form.useForm();
    const [dataSource, setdataSource] = useState([])
    const [pagenum, setpagenum] = useState(1)
    const [pagesize, setpagesize] = useState(5)
    const [total, settotal] = useState(1000)
    const [query, setquery] = useState('')
    const [addModalVisible, setaddModalVisible] = useState(false);
    const [update,setupdate]=useState({})
    const [isupdateModalVisible,setisupdateModalVisible]=useState(false)
    const columns = [
        {
            title: "#",
            dataIndex: "goods_id"
        },
        {
            title: "商品名称",
            dataIndex: 'goods_name'
        },
        {
            title: "商品价格",
            dataIndex: 'goods_price'
        }
        ,
        {
            title: "商品重量",
            dataIndex: 'goods_weight'
        }
        ,
        {
            title: "创建时间",
            dataIndex: 'add_time',
            render: (time) => {
                return <div>{time}</div>
            }
        },
        {
            title: "操作",
            render: (item) => {
                return <div>
                    <Button onClick={()=>updatekuagn(item) }>修改</Button>
                    <Button onClick={()=>showConfirm(item.goods_id)}>删除</Button>
                </div>
            }
        }
    ]
    //修改数据框
    const updatekuagn=(item)=>{
        console.log(item);
        setupdate(item)

        setisupdateModalVisible(true)
        updateform.setFieldsValue(item)
    }
    // 修改数据发送请求
    const onupdateFinish=async(item2)=>{
        setisupdateModalVisible(false)
        console.log(item2);
        const res = await server.put(`/goods/${update.goods_id}`,item2)
        updateform.setFieldsValue({})
    }
    const updatehandleOk = () => {
        setisupdateModalVisible(false);
      };
    
      const updatehandleCancel = () => {
        setisupdateModalVisible(false);
      };
    const onSearch = async(value) =>{
        const res =  await server.get(`goods/${value}`)
        setdataSource([res.data])
    } 
    const getGoods = async () => {
        let res = await server.get(`/goods?query=${query}&pagenum=${pagenum}&pagesize=${pagesize}`,)
        setpagenum(res.data.pagenum)
        settotal(res.data.total)
        console.log(res,11111111111111111);
        setdataSource(res.data.goods)
    }
    const handleOk = () => {
        setaddModalVisible(false);
    };

    const handleCancel = () => {
        setaddModalVisible(false);
    };
    // 添加数据
    const onaddFinish = (values) => {
        console.log('Success:', values);
        server.post("/goods",values)

    };
    const uploadpic=async()=>{
        let url='图片地址'
        const res =await server.post("/upload",url)
        console.log(res);
    }
    const changePage=(num,size)=>{
        setpagenum(num)
        setpagesize(size)
    }
    useEffect(()=>{
        getGoods()
    },[pagenum,pagesize])
    useEffect(() => {
        getGoods()
    }, [])
    return (
        <div>
            <Card>
                <Search placeholder="input search text" onSearch={onSearch} style={{ width: 200 }} /><Button type='primary' onClick={() => { setaddModalVisible(!addModalVisible) }}>添加商品</Button>
                <Table dataSource={dataSource} columns={columns}
                pagination={{
                    current:pagenum,
                    pageSize:pagesize,
                    total:total,
                    // pageSizeOptions:[4,8,10],
                    onchange:changePage
                }}
                />
                
            </Card>
            <Modal title="添加数据" visible={addModalVisible} onOk={handleOk} onCancel={handleCancel}>
                <Form
                    name="basic"
                    onFinish={onaddFinish}
                    // onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item
                        label="商品名称"
                        name="goods_name"
                        rules={[
                            {
                                required: true,
                                message: '商品名称!',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="商品价格"
                        name="goods_price"
                        rules={[
                            {
                                required: true,
                                message: '商品价格!',
                                
                            },
                        ]}
                    >
                        <InputNumber   />
                    </Form.Item>
                    <Form.Item
                        label="商品数量"
                        name="goods_number"
                        rules={[
                            {
                                required: true,
                                message: '商品数量!',
                            },
                        ]}
                    >
                        <InputNumber   />
                    </Form.Item>
                    <Form.Item
                        label="商品重量"
                        name="goods_weight"
                        rules={[
                            {
                                required: true,
                                message: '商品重量!',
                            },
                        ]}
                    >
                        <InputNumber   />
                    </Form.Item>
                    <Form.Item
                        label="商品图片"
                        name="pics"
   
                    >
                        <Button onClick={uploadpic}>点击上传</Button>
                    </Form.Item>

                    <Form.Item
                        wrapperCol={{
                            offset: 8,
                            span: 16,
                        }}
                    >
                        <Button type="primary" htmlType="submit">
                            添加
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
            {/* 修改框 */}
            <Modal title="修改数据" visible={isupdateModalVisible} onOk={updatehandleOk} onCancel={updatehandleCancel}>
            <Form
                    name="basic"
                    onFinish={onupdateFinish}
                    // onFinishFailed={onFinishFailed}
                    autoComplete="off"
                    form={updateform}
                >
                    <Form.Item
                        label="商品名称"
                        name="goods_name"
                        rules={[
                            {
                                required: true,
                                message: '商品名称!',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="商品价格"
                        name="goods_price"
                        rules={[
                            {
                                required: true,
                                message: '商品价格!',
                                
                            },
                        ]}
                    >
                        <InputNumber   />
                    </Form.Item>
                    <Form.Item
                        label="商品数量"
                        name="goods_number"
                        rules={[
                            {
                                required: true,
                                message: '商品数量!',
                            },
                        ]}
                    >
                        <InputNumber   />
                    </Form.Item>
                    <Form.Item
                        label="商品重量"
                        name="goods_weight"
                        rules={[
                            {
                                required: true,
                                message: '商品重量!',
                            },
                        ]}
                    >
                        <InputNumber   />
                    </Form.Item>

                    <Form.Item
                        wrapperCol={{
                            offset: 8,
                            span: 16,
                        }}
                    >
                        <Button type="primary" htmlType="submit">
                        修改
                        </Button>
                    </Form.Item>
                </Form>
      </Modal>
        </div>
    )
}

export default Goods
